<template>
  <div class="coniner">
    <div class="content_section">
      <!-- test -->
      <div class="nav_contents">
        <div
          class="Gold_coins"
          :class="member_titleNumber == 2 ? 'Gold_coins_selected' : ''"
          @click="vip_member(2)"
        >
          VIP会员
        </div>
        <div
          class="deaults"
          :class="member_titleNumber == 1 ? 'deaults_selected' : ''"
          @click="senior_member(1)"
        >
          高级会员
        </div>
      </div>
      <div v-if="member_titleNumber == 2">
        <div class="coin_sections">
          <template v-for="(item, index) in vip_list">
            <div
              class="coin_recharge"
              :class="is_seledNumber == index ? 'seled_recharge' : ''"
              @click="coin_recharge(index, item.Content, item.Price,item.Id)"
            >
              <div class="coins_coins">
                <div
                  class="money_coins"
                  :class="is_seledNumber == index ? 'selected_coins' : ''"
                >
                  {{ item.Month }}个月
                </div>
                <div class="discount_discount">
                  ${{ item.Price }}<span>折扣{{ item.DisCount }}</span>
                </div>
                <div class="member_months">
                  <div :class="is_seledNumber == index ? 'selected_coins' : ''">
                    ${{ item.Only }}/月
                  </div>
                </div>
              </div>
            </div>
          </template>
          <!-- 22 -->
        </div>
        <!-- 特权 -->
        <div class="privilege_section">
          <div class="privilege_titles">特权</div>
          <div class="privilege_content">
            <template v-for="(item, index) in privilege_arry">
              <div class="privilege_privilege">
                <div class="privilege_commons">
                  <div class="img_content"><img :src="item.Img" /></div>
                  <div class="privilege_ti">{{ item.Title }}</div>
                </div>
                <div class="pri_content">{{ item.Content }}</div>
              </div>
            </template>
          </div>
        </div>
        <!--  -->
        <div class="payment_sections">
          <div class="payment_content">
            <div class="Total_price">总价：${{ money }}</div>
            <div class="pay_button" @click="pay_button()">付款</div>
          </div>
        </div>
      </div>
      <!-- v-else -->
      <div v-if="member_titleNumber == 1">
        <div class="coin_sections">
          <template v-for="(item, index) in vip_list">
            <div
              class="coin_recharge"
              :class="is_seledNumber == index ? 'seled_recharge_senior' : ''"
              @click="coin_recharge(index, item.Content, item.Price,item.Id)"
            >
              <div class="coins_coins">
                <div
                  class="money_coins"
                  :class="is_seledNumber == index ? 'selected_coins_senior' : ''"
                >
                   {{ item.Month }}个月
                </div>
                <div class="discount_discount">${{ item.Price }}<span class="selected_coins_senior">折扣{{ item.DisCount }}%</span></div>
                <div class="member_months">
                  <div
                    :class="is_seledNumber == index ? 'selected_coins_senior' : ''"
                  >
                    ${{ item.Only }}/月
                  </div>
                </div>
              </div>
            </div>
            <!-- 22 -->
          </template>
        </div>
        <!-- 特权 -->
        <div class="privilege_section">
          <div class="privilege_titles">特权</div>
          <div class="privilege_content">
            <template v-for="(item, index) in privilege_arry">
              <div class="privilege_privilege">
                <div class="privilege_commons">
                  <div class="img_content"><img :src="item.Img" /></div>
                  <div class="privilege_ti">{{ item.Title }}</div>
                </div>
                <div class="pri_content">{{ item.Content }}</div>
              </div>
              <!-- 222 -->
            </template>
          </div>
        </div>
        <!--  -->
        <div class="payment_sections">
          <div class="payment_content">
            <div class="Total_price">总价：${{money}}</div>
            <div class="pay_button" @click="pay_button()">付款</div>
          </div>
        </div>
      </div>
    </div>
    <PayMethods @closes="closes_models" v-if="is_paymethod" :is_coin="is_coin" :moneys="money" :money_id="money_id"/>
  </div>
</template>
<script>
import { GetVipInfoMessage } from "../utils/http.js";
export default {
  name: "MeMember",
  data: () => ({
    is_seledNumber: 0,
    member_titleNumber: 2, //会员选项标题
    vip_list: [], //vip会员列表
    senior_list: [], //高级会员
    privilege_arry: [],
    money:"", //金钱
    is_paymethod:false,
    is_coin:true,
    money_id:''
  }),
  mounted() {
    this.member_Recharge();
  },
  methods: {
    //会员充值
    member_Recharge() {
      layer.load(0, {
        shade: false,
      }); //0代表加载的风格，支持0-2
      let param = {
        Language: "zh-cn",
        Type: this.member_titleNumber,
      };
      GetVipInfoMessage(param).then((res) => {
        if (res.Code == 1) {
          this.vip_list = res.Obj.List;
          this.privilege_arry = res.Obj.List[0].Content;
          this.money = res.Obj.List[0].Price;
           this.money_id=res.Obj.List[0].Id;
        }
        layer.closeAll();
      });
    },
    coin_recharge(vals, arrys, money,Id) {
      this.is_seledNumber = vals;
      this.privilege_arry = arrys;
      this.money = money;
      this.money_id=Id;
    },
    vip_member(val) {
      //vip会员
      this.member_titleNumber = val;
      this.member_Recharge();
    },
    senior_member(val) {
      //高级会员
      this.member_titleNumber = val;
      this.member_Recharge();
    },
    pay_button(){
     this.is_paymethod=true
    },
    closes_models(){
      this.is_paymethod=false
    }   
  },
};
</script>
<style scoped>
.coniner {
  width: 73%;
  margin: 0 auto;
  background-color: #ffffff;
}
.content_section {
  width: 100%;
  margin: 0 auto;
}
.nav_contents {
  display: flex;
  text-align: center;
  margin-bottom: 30px;
  height: 45px;
}
.Gold_coins {
  display: flex;
  align-items: center;
  width: 50%;
  justify-content: center;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #4064e3;
}
.Gold_coins_selected {
  background-color: #476cd2;
  color: #ffffff;
}
.deaults_selected {
  background-color: #f2d5a3 !important;
  color: #7c561e;
}
.deaults {
  width: 50%;
  background: #ffffff;
  height: 45px;
  line-height: 45px;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #7c561e;
}
.coin_sections {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.coin_recharge {
  width: 31%;
  margin-bottom: 15px;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  padding-bottom: 10px;
  padding-top: 10px;
  text-align: center;
  margin-left: 15px;
}
.seled_recharge {
  background: #f9fafe !important;
  border: 1px solid #4064e3 !important;
  border-radius: 6px;
}
.seled_recharge_senior {
  background: #fffaf0 !important;
  border: 1px solid #eec989 !important;
  border-radius: 6px;
}
.selected_coins {
  color: #4064e3 !important;
}
.selected_coins_senior {
  color: #b18545 !important;
}
.coins_coins {
  width: 90%;
  margin: 0 auto;
}
.money_coins {
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #383e49;
  margin-bottom: 5px;
}
.discount_discount {
  font-size: 20px;
  font-family: DIN;
  font-weight: bold;
  color: #383e49;
  margin-bottom: 8px;
}
.discount_discount span {
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #4064e3;
  margin-left: 10px;
}
.member_months {
  font-size: 14px;
  font-family: DIN;
  font-weight: bold;
  color: #3f444f;
}
.privilege_section {
  width: 100%;
}
.privilege_titles {
  width: 94%;
  margin: 18px auto 10px auto;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #383e49;
}
.privilege_content {
  width: 90%;
  margin: 10px auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.privilege_privilege {
  /* display: flex; */
  /* align-items: center; */
  width: 21%;
  margin-bottom: 10px;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 600;
  color: #383e49;
  margin-left:15px;
}
.privilege_commons {
  display: flex;
  align-items: center;
}  
.privilege_privilege img {
  margin-right: 5px;
  width: 20px;
  height: 20px;
}
.img_content {
  text-align: center;
}
.privilege_ti {
  text-align: center;
  margin-bottom: 5px;
}
.pri_content {
  font-size: 8px;
  color: #000;
  opacity: 0.4;
  font-weight: normal !important;
}
.payment_sections {
  width: 90%;
  margin: 50px auto 50px auto;
  display: flex;
  justify-content: flex-end;
}
.payment_content {
  width: 60%;
  justify-content: space-between;
  display: flex;
  align-items: center;
}
.pay_button {
  background: linear-gradient(161deg, #637fe7, #3659cf);
  border-radius: 22px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  width:16%;
  text-align: center;
  line-height: 33px;
}
.Total_price {
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #434a56;
}
</style>